<template>
    <div class="brand-container">
        <!-- 顶部操作栏 -->
        <div class="top-bar">
            <div class="filter-area">
                <el-input v-model="name" placeholder="输入类别名称查询" style="width: 200px; margin-right: 10px;" />
                <el-button type="primary" @click="handleSearch">查询</el-button>
            </div>

            <div class="action-buttons">
                <el-button type="primary" @click="openAddDialog">新增</el-button>
                <el-button @click="refreshData">刷新</el-button>
            </div>
        </div>

        <!-- 品牌列表 -->
        <el-table :data="brands" border style="width: 100%" v-loading="tableLoad">
            <el-table-column label="操作" width="120">
                <template #default="{ row }">
                    <el-button size="small" @click="editBrand(row.id)">
                        <el-icon>
                            <Edit />
                        </el-icon>
                    </el-button>
                    <el-button size="small" @click="deleteBrand(row)">
                        <el-icon>
                            <Delete />
                        </el-icon>
                    </el-button>
                </template>
            </el-table-column>

            <el-table-column prop="name" label="属性" width="300">
                <template #default="{ row }">
                    {{ row.name }}
                </template>
            </el-table-column>
        </el-table>

        <!-- 新增/编辑品牌弹窗 -->
        <el-dialog v-model="dialogVisible" :title="dialogType ? '编辑品牌' : '新增品牌'" width="400px" @close="resetForm">
            <div class="dialog-form">
                <div class="form-item">
                    <label class="label">*品牌名称:</label>
                    <el-input v-model="form.name" placeholder="请输入品牌名称" />
                </div>
            </div>

            <template #footer>
                <el-button @click="dialogVisible = false">关闭</el-button>
                <el-button type="primary" @click="saveBrand" :loading="saving">
                    {{ dialogType ? '更新' : '保存' }}
                </el-button>
            </template>
        </el-dialog>
    </div>
</template>

<script setup>
import { reactive, ref, onMounted } from 'vue'
import { Edit, Delete } from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import axios from 'axios'

const tableLoad = ref(false)

const saving = ref(false)

const name = ref('')

const pageInfo = reactive({
    pageNum: 1,
    pageSize: 10,
    total: 0
})

// 弹窗控制
const dialogVisible = ref(false)
const dialogType = ref(false)


// 数据列表
const brands = ref([])

const getBrands = async () => {
    tableLoad.value = true
    try {
        const { pageNum, pageSize } = pageInfo;
        const params = {
            pageNum,
            pageSize,
            name: name.value
        }

        const res = await axios.get('/api/basic/goods/brandByPage', { params })

        if (res.data.code === 5200) {
            brands.value = res.data.pageInfo.list
            pageInfo.pageNum = res.data.pageInfo.pageNum
            pageInfo.total = res.data.pageInfo.total
        } else {
            ElMessage.error(res.data.msg)
        }
    } catch (error) {
        ElMessage.error(error.message)
    } finally {
        tableLoad.value = false
    }

}


// 表单数据
const form = ref({ id: '', name: '' })

// 打开新增弹窗
const openAddDialog = () => {
    dialogType.value = false
    dialogVisible.value = true
}

// 编辑品牌
const editBrand = async (id) => {
    dialogType.value = true

    try {
        const res = await axios.get('/api/basic/goods/brandById', { params: { id } })
        if (res.data.code === 5200) {
            form.value = res.data.brand
            dialogVisible.value = true
        } else {
            ElMessage.error(res.data.msg)
        }
    } catch (error) {
        ElMessage.error(error.message)
    }
}

// 保存品牌
const saveBrand = async () => {

    try {
        saving.value = true

        if (!form.value.name.trim()) {
            ElMessage.error('请输入品牌名称')
            return
        }

        const url = dialogType.value ? '/api/basic/goods/updateBrand' : '/api/basic/goods/addBrand'
        console.log(form.value)

        const res = await axios.post(url, form.value)
        if (res.data.code === 5200) {
            ElMessage.success(res.data.msg)
            dialogVisible.value = false
            getBrands()
        } else {
            ElMessage.error(res.data.msg)
        }
    } catch (error) {
        ElMessage.error(error.message)
    } finally {
        saving.value = false
    }
}


// 删除品牌
const deleteBrand = async (row) => {
    try {
        await ElMessageBox.confirm(`确定要删除品牌 "${row.name}" 吗？`, '警告')
    } catch {
        ElMessage.info('已取消删除')
    }

    try {
        const res = await axios.post('/api/basic/goods/deleteBrand', null, { params: { id: row.id } })
        if (res.data.code === 5200) {
            ElMessage.success(res.data.msg)
            await getBrands()
        }
    } catch (error) {
        ElMessage.error(error.message)
    }
}

// 重置表单
const resetForm = () => {
    form.value.name = ''
    dialogType.value = false
}

// 查询
const handleSearch = () => {
    getBrands()
}

// 刷新数据
const refreshData = () => {
    resetForm()
    getBrands()
}

onMounted(() => {
    getBrands()
})

</script>

<style scoped>
.brand-container {
    padding: 20px;
    background-color: #fff;
}

.top-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.filter-area {
    display: flex;
    align-items: center;
    gap: 10px;
}

.action-buttons {
    display: flex;
    gap: 10px;
}

.el-table {
    margin-top: 10px;
}

/* 操作按钮样式 */
.el-button--small {
    padding: 5px 8px;
    font-size: 12px;
}

.dialog-form {
    padding: 20px;
    font-size: 14px;
}

.form-item {
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.label {
    width: 100px;
    text-align: right;
    color: #333;
}

.el-input {
    flex: 1;
    max-width: 200px;
}
</style>